<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.10.1.min.js"></script>
    <style>
        .active {
            background-color: #f00;
        }

        li {
            margin: 5px 0;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div id="box" class="par" lang="zh-cn">
        <h3>Box</h3>
        <ul class="wrap">
            <li class="first">1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
            <li>
                <span></span>
            </li>
            <li></li>
        </ul>
    </div>
</body>
<script>
    // attr  用来获取或设置  属性节点( 包括 自定义属性)
    // $("#box").attr("www", "123123123");   // setAttribute()
    // $("#box").attr("class", "test");

    // $("#box").attr("www");   // getAttribute()
    // $("#box").attr("class"); //

    // 同时设置多个参数
    // $("#box").attr({
    //     www: "testWWW"
    // })

    // $("#box").attr("www", function (a) {
    //     var num = Math.random();
    //     console.log(num);
    //     if (num > 0.5) {
    //         return "哈哈"
    //     } else {
    //         return "我是测试的return值"
    //     }
    // })

    // removeAttr  删除(属性节点 包括 自定义属性)
    // $("#box").removeAttr("www");


    console.dir(document.getElementById("box"))

    // prop  获取和设置  Dom元素上的属性  (Dom 是对象 )

    // 官方属性
    // $("#box").prop("className", "two");  //添加  或  修改

    // $("#box").prop("className");   //  获取

    // 自定义属性  index  
    // $("#box").prop("index1232131212312", 1);


    // 用来删除由.prop()方法设置的属性集   (当删除官方属性的时候回返回undefined)
    // $("#box").removeProp("className");


    // addClass  为选择元素添加class名  (重复的不添加)
    // $("#box").addClass("one").addClass("two").addClass("one")

    $("#box").addClass("one two");

    // $("#box").addClass(function () {
    //     var num = Math.random();
    //     console.log(num);
    //     if (num > 0.5) {
    //         return "one";
    //     } else {
    //         return "two";
    //     }
    // })

    // removeClass 删除对应元素的class名

    $("#box").removeClass("one two")


    // toggleClass   不存在就添加  存在就删除
    $("li").click(function () {
        $(this).toggleClass("active");
    })




</script>

</html>